<template>
	<view>
		<view class="bg">
			<view class="box">
				<view class="user">
					<view class="avatur-container">
						<image :src="people.avatur"></image>
					</view>
					<view>
						<view class="content">名字:{{people.name}}</view>
						<view class="content">性别:{{people.gender===1?'男':'女'}}</view>
						<view class="content" style="margin-top: 20rpx;" v-if="people.zhuyi">注意事项：{{people.zhuyi}}</view>
					</view>
				</view>
				<view class="chat">
					<image style="width: 40rpx;height: 40rpx;" src="../../static/feed/chat.png"></image>
				</view>
			</view>
		</view>
	</view>
	<view class="container">
		<view class="tablist">
			<view @click="changTab(0)" :class="['tab',tab===0?'active':'']">个人信息</view>
			<view @click="changTab(1)" :class="['tab',tab===1?'active':'']">服务评价</view>
		</view>
		<view v-if="tab===0">
			<view class="detail">
				<view class="title">
					<image style="width: 50rpx;height: 50rpx;margin-right: 10rpx;" src="../../static/feed/introduction.png"></image>
					个人介绍
				</view>
				<view class="neirong">{{people.introduction}}</view>
			</view>
			<view class="detail">
				<view class="title">
					<image style="width: 50rpx;height: 50rpx;margin-right: 10rpx;" src="../../static/feed/introduction.png"></image>
					带宠经历
				</view>
				<view class="neirong">{{people.experience}}</view>
			</view>
		</view>
		<view v-if="tab===1">
			<Pingjia type="people" :people_id="people.people_id"></Pingjia>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {ref,reactive} from "vue"
	import {onLoad} from "@dcloudio/uni-app"
	import http from "@/utils/request.js"
	import Pingjia from "./components/Pingjia.vue"
	onLoad((e)=>{
		getpeople(e.people_id)
	})
	
	let tab=ref(0)
	
	let people=ref({})
	
	function getpeople(e){
		let response=http.get('/people/getpeople',{people_id:e})
		response.then(res=>{
			if(res.data.code===200){
				people.value=res.data.data
				console.log(people.value)
			}
		})
	}
	function changTab(e){
		tab.value=e;
	}
	
</script>

<style lang="scss">
	.bg{
		width: 100%;
		height: 450rpx;
		position: relative;
		background: linear-gradient(80deg,#f8e177 49.5%,transparent 49.5%,#fae68d 49.5%);
		
		.box{
			width: 100%;
			display: flex;
			box-sizing: border-box;
			position: absolute;
			bottom:150rpx;
			padding: 0 20rpx;
			justify-content: space-between;
			align-items: center;
			
			.user{
				display: flex;
				align-items: center;
				
				.avatur-container{
					margin-right: 25rpx;
					image{
						border-radius: 50%;
						border: 4rpx solid white;
						width: 150rpx;
						height: 150rpx;
					}
				}
				
				.content{
					font-size: 32rpx;
					letter-spacing: 0.1em;
				}
			}
			
			.chat{
				&:active{
					opacity: 0.7;
				}
			}
		}
	}
	
	.container{
		width: 100%;
		min-height: 1000rpx;
		position: relative;
		top:-40rpx;
		border-radius: 40rpx 40rpx 0 0;
		background-color: #ffffff;
		
		.tablist{
			width: 100%;
			padding: 20rpx 0;
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			justify-content: center;
			
			.tab{
				font-size: 40rpx;
				margin-right: 40rpx;
				color: #626669;
				
				&.active{
					color:#000000;
					position: relative;
					font-weight: 600;
					
					&::after{
						content: '';
						position: absolute;
						border-radius: 40rpx;
						width: 120rpx;
						height: 10rpx;
						background: linear-gradient(80deg,#f8e177 49.5%,transparent 49.5%,#fae68d 49.5%);
						bottom: -20rpx;
						right: 50%;
						transform:translateX(50%) ;
					}
				}
			}
		}
		
		.detail{
			width:100% ;
			box-sizing: border-box;
			padding: 20rpx 20rpx;
			
			.title{
				display: flex;
				align-items: center;
				font-size: 38rpx;
				font-weight: 600;
				letter-spacing: 0.1em;
			}
			
			.neirong{
				display: flex;
				box-sizing: border-box;
				width: 100%;
				color: #626669 ;
				font-size: 32rpx;
				padding: 10rpx 50rpx;
			}
		}
		
	}
</style>
